$fontStack:    Helvetica, sans-serif;
$primaryColor3: #333;
$width: 400px;
$m20: 20px;
$m10: 10px;
$primaryColor6: #666;
$primaryColor9: #999;
$primaryColorf: #fff;
$primaryColor0: #000;
@mixin transition($str: all 0.2s){
    -webkit-transition: $str;
    -moz-transition: $str;
    -ms-transition: $str;
    -o-transition: $str;
    transition: $str;
}

/* 变量 */
body {
  font-family: $fontStack;
  color: $primaryColor3;
  width: $width;
  height: 400px-200px;
}

@mixin ellepsis() {
    word-wrap: break-word;
    overflow: hidden;
    white-space: nowrap;
}

/* 嵌套 */
.nav{
    ul{
        margin:0;
        padding:0;
        overflow:hidden;
        @include transition();
        li{
            width:$width;
            height:200px;
            float:left;
            @include transition(all 0.6s linear);
            a{
                text-decoration:none;
                color: blue;
                @include ellepsis();
                @include transition(all 0.4s);
            }
        }
    }
}

.menu {
    @extend .nav;
}
.t-ov{
    text-overflow:ellepsis;
    overflow:hidden;
    white-space:nowrap;
}
.wrapper{
    width:1000px;
    margin:0 auto;
}
.td-n{
    text-decoration:none;
}
/* 继承 extend*/
.pic-list{
    @extend .wrapper;
    ul{
        margin-right: $m20;
        li{
            width:300px;
            height:200px;
            margin-right: -$m20;
            a{
                @extend .td-n;
                color: $primaryColor3;
            }
        }
    }
}
/* 导入 */
@import "sassTest1";
/* mixin */
@mixin box-sizing($sizing: padding-box) {
    -webkit-box-sizing:$sizing;
       -moz-box-sizing:$sizing;
            box-sizing:$sizing;
}

.box-border{
    border:1px solid #ccc;
    /* @include box-sizing(border-box); */
    @include box-sizing();
}
@mixin transition($transition:all 0.5s ease-in-out){
    -webkit-transition: $transition;
    -o-transition: $transition;
    transition: $transition;
}
ul li a{
    @include transition();
    color: $primaryColor3;
}
.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}
/* 继承 */
.sucess{
    @extend .message;
    border-color:green;
}
.warning{
    @extend .message;
    border-color:orange;
}
.error{
    @extend .message;
    border-color:red;
}
/* 运算 */
.container{
    width:100%;
}
.aticle{
    width:600px/900px*100%;
}
.aside{
    width:300px+400px;
    height:$width+200px;
}
/* 颜色 */
$linkColor: #08c;
a {
    text-decoration:none;
    color:$linkColor;
    &:hover{
      color:darken($linkColor,10%);
    }
}
.list li  a{
    text-decoration:none;
    color:$linkColor;
    &:hover{
        color:darken($linkColor,10%);
    }
}